<template>
	<el-upload
		:action="isToLocal?uploadLocalUrl:uploadReqUrl"
		list-type="picture-card"
		:auto-upload="true"
		:headers="uploadHeader"
		:limit="limitNum"
		:file-list="imageList"
		ref="imageRef"
		:show-file-list="showFileList"
		:disabled="progressShow&&showProcess"
		:on-remove="removeImage"
		:on-success="uploadSuccess"
		:on-progress="onProgress"
		:on-error="onError"
		:before-upload="beforeLoad"
		accept=".jpg,.png,.bmp,.JPG,.PBG,.BMP,.jpeg,.JPEG"
		:class="['upload-box',{ imgHide: imageHideUpLoad },{idcard:isIdcard||isBanner},'template-upload',{bgc:isBgColor}]"
		>
		<i slot="default" class="el-icon-camera" v-if="isIdcard"></i>
		<i slot="default" class="el-icon-plus" v-else></i>
		<div class="el-upload__text" style="margin-top:10px;" v-if="isIdcardFront&&isIdcard">{{ isCreateShop?'请上传营业执照图片':"请上传身份证正面照片" }}</div>
		<div class="el-upload__text" style="margin-bottom:10px;" v-if="isIdcardBack&&isIdcard">身份反面</div>

		<div slot="file" slot-scope="{ file }" style="position: relative;height: 100%;width: 100%;">
			<img
				class="el-upload-list__item-thumbnail"
				:src="file.url"
				alt=""
			/>
			<span class="el-upload-list__item-actions">
				<span
					v-if="isIncludeUrl"
					class="el-upload-list__item-preview"
					@click="previewFn(file)"
				>
					<i class="el-icon-zoom-in"></i>
				</span>
				<span
					class="el-upload-list__item-delete"
					@click="removeImage(file)"
				>
					<i class="el-icon-delete"></i>
				</span>
			</span>
			<div class="upload-process sn-flex sn-col-center sn-row-center" v-show="progressShow&&showProcess">
				<el-progress type="circle" :text-inside="true" :stroke-width="16" :percentage="percentage"></el-progress>
			</div>
		</div>
		
	</el-upload>
</template>

<script>
import {imageUrl,uploadReqUrl,uploadLocalUrl} from '@/settings'
import { getToken, getTokenType} from '@/utils/auth'
import {guid} from '@/utils/index'
export default {
data(){
	return{
		uploadReqUrl: uploadReqUrl,
		uploadLocalUrl:uploadLocalUrl,
		imageUrl:imageUrl,
		imageList:[],
		uploadSuccessId:null,
		uploadSuccessIdList:[],
		uploadHeader:{
			  'Authorization':getTokenType() + ' ' + getToken(),
			// shopId:this.$store.state.shop.chooseShopItem.id
		},
		percentage: 0,
		progressShow:false,
	}
},
props: {
	showFileList:{
		type:Boolean,
		default:true
	},
	// 上传的数量限制
	limitNum:{
		type:Number,
		default:1
	},
	// 是否最多传一个
	initOne:{
		type:String,
		default:''
	},
	// 是否隐藏图片
	isHeadImg:{
		type:Boolean,
		default:false
	},
	isBanner: {
		type:Boolean,
		default:false
	},
	// 是否是上传的身份证照片
	isIdcard:{
		type:Boolean,
		default:false
	},
	// 是否是上传营业执照
	isCreateShop:{
		type:Boolean,
		default:false
	},
	// 身份证前面图片
	isIdcardFront:{
		type:Boolean,
		default:false
	},
	// 身份证背面图片
	isIdcardBack:{
		type:Boolean,
		default:false
	},
	// 上传到本地不是CDN
	isToLocal: {
		type:Boolean,
		default:false
	},
	// 是否展示上传进度条
	showProcess: {
		type:Boolean,
		default:false
	},
	// 灰色北京
	isBgColor: {
		type:Boolean,
		default:false
	},
	initData: {
		type: Array,
		default: () => {
			return [];
		}
	},
	isIncludeUrl: {
		type:Boolean,
		default:false
	}
},
computed:{
	imageHideUpLoad() {
		return this.imageList.length >= this.limitNum;
	},
},
created() {
	if (this.limitNum == 1 && this.initOne != '' && this.initOne != null) {
			this.imageList.push(
			{
				uid:guid(),
				url:(this.isHeadImg||this.isBanner)?this.initOne:this.imageUrl+this.initOne
			}
		)
	}
	console.log(this.imageList);
},
mounted() { 
	if (this.limitNum != 1) {
		let ary = [];
		let initAry = [];
		let that = this;
		this.initData.forEach(item => {
			ary.push({
				uid: guid(),
				url: item.url,
				id:item.id
			});
			if (that.isIncludeUrl) {
				initAry.push({
					url: item.url,
					id:item.id
				});
			} else {
				initAry.push(item.id);
			}
		});
		this.imageList = ary;
		this.uploadSuccessIdList = initAry;
	}
},
methods: {
	previewFn(file) {
		console.log(222);
		this.$emit('previewImage', file.url);
	},
	onProgress(process) {
		this.progressShow = true;
		this.percentage = Number(process.percent.toFixed(0));
	},
	onError() {
		this.progressShow = false;
		this.$message.error('上传失败');
	},
	 //上传图片
	uploadSuccess: function (response, file, fileList) {
		this.progressShow = false;//关闭process
		if(response.code == 'SUCCESS'){
			this.imageList.push(file);
			if (this.limitNum == 1) {
				if (this.isBanner||this.isIncludeUrl) {
					this.uploadSuccessId = response.data[0].id;
				} else {
					this.uploadSuccessId = response.data[0].id;
				}
				this.$emit('imageUpload', { local: this.uploadSuccessId, url:response.data[0].url});
			} else {
				if (this.isIncludeUrl) {
					this.uploadSuccessIdList.push({
						id: response.data[0].id,
						url:response.data[0].url
					});
				} else {
					this.uploadSuccessIdList.push(response.data[0].id);
				}
				this.$emit('imageUpload',{local:this.uploadSuccessIdList,currentId:response.data[0].id});
				// this.$emit('imageRemove',{local:JSON.stringify(this.uploadSuccessIdList),copy:JSON.stringify(this.uploadWxSuccessIdList)});
			}
		}else{
			let fileList = this.$refs.imageRef.uploadFiles;
			let index = fileList.findIndex((item) => item.uid === file.uid);
			this.imageList.splice(index, 1);
			this.$message.error('上传图片失败，错误信息：'+response.erroMessage)
		}
	},
	removeImage(file) {
		let fileList = this.$refs.imageRef.uploadFiles;
		let index = fileList.findIndex((item) => item.uid === file.uid);
		fileList.splice(index, 1);
		if(this.limitNum == 1){
			this.uploadSuccessId = null;
			this.imageList.splice(index, 1);
			this.$emit('imageRemove');
		}else{
			this.uploadSuccessIdList.splice(index, 1);
			this.imageList.splice(index, 1);
			this.$emit('imageRemove',{local:this.uploadSuccessIdList,currentIndex:index});
		}
	},
	draggleRemove(id){
		let fileList = this.$refs.imageRef.uploadFiles;
		let index = fileList.findIndex((item) => item.uid === id);
		if(this.limitNum == 1){
			this.uploadSuccessId = null;
			this.imageList.splice(index, 1);
		}else{
			this.uploadSuccessIdList.splice(index, 1);
			this.imageList.splice(index, 1);
		}
	},
	beforeLoad(file){
		const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
		const whiteList = ["png", "jpg", "bmp", "PNG", "JPG","BMP",'jpeg','JPEG'];
		if (whiteList.indexOf(fileSuffix) === -1) {
			this.$message.error('上传图片只能是 png,jpg,bmp,jpeg格式的');
			return false;
		}
		const isLt5M = file.size / 1024 / 1024  < 5;
		if (!isLt5M) {
			this.$message.error('上传文件大小不能超过 5MB');
			return false;
		}
	},
}
}
</script>

<style lang='scss'>
.upload-process{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 999;
}
.imgHide{
	.el-upload--picture-card{
		display: none !important;
	}
	.el-form-item__content{
		// display: none !important;
		line-height: 0;

	}
}
.idcard{
	.el-upload--picture-card{
		width: 306px;
		height: 124px;
		line-height: 10px;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: #fff;
	}
	.el-upload-list--picture-card .el-upload-list__item{
			width: 306px;
		height: 124px;
		line-height: 124px;
		display: block;
		margin: 0 auto;
		>div{
			height: 100%;
		}
	}
	.el-upload--picture-card:hover, .el-upload:focus {
		border-color: #ff551a;
		color: #ff551a;
	}
}
.bgc{
	.el-upload--picture-card{
		background-color: #eeeeee;
		border: 1px solid #eeeeee;
	}
	.el-upload--picture-card:hover, .el-upload:focus {
		border-color: #eeeeee;
		color: #eeeeee;
	}
}
.template-upload{
	.el-upload{
		position: relative;
		
	}
}

</style>